<template>
    <el-popover
            placement="left"
            trigger="click"
            v-model="visible"
            style="float: right;
    margin: 52px 50px 0 0;
    width: auto;
    min-width: 30px;
    background-color: rgba(0, 0, 0, 0.5);">
        <el-container>
            <!--<el-header style="padding: 0;height: 18px;text-align: center">-->
            <!--&lt;!&ndash;<p style="font-size: xx-small">底图切换</p>&ndash;&gt;-->
            <!--</el-header>-->
            <el-main style="padding: 0">
                <el-card :body-style="{ padding: '0px' }" style="margin-bottom: 10px;cursor: pointer">
                    <img src="../../../static/img/1.png"
                         style="height: 30px;width: 30px" @click="toTDT_Terra" title="TDT_Terra" class="imgTiles">
                </el-card>
                <el-card :body-style="{ padding: '0px' }" style="margin-bottom: 10px;cursor: pointer">
                    <img src="../../../static/img/2.png"
                         style="height: 30px;width: 30px" @click="toLocal_Google" title="Local_Google" class="imgTiles">

                </el-card>
                <el-card :body-style="{ padding: '0px' }" @click="toTDT_Raster" style="cursor: pointer">
                    <img src="../../../static/img/3.png"
                         style="text-align:center;height: 30px;width: 30px" @click="toTDT_Raster" title="TDT_Raster"
                         class="imgTiles">

                </el-card>
            </el-main>
        </el-container>
    </el-popover>
</template>

<script>
    export default {

        data() {
            return {
                visible: false
            }
        },
        props: {},
        methods: {
            toTDT_Terra() {
                this.$globalConstant.map.setLayoutProperty("TDT_Raster", "visibility", "none");
                this.$globalConstant.map.setLayoutProperty("TDT_Terra", "visibility", "visible");
                this.$globalConstant.map.setLayoutProperty("simple-tiles", "visibility", "none");
            },
            toLocal_Google() {
                this.$globalConstant.map.setLayoutProperty("TDT_Raster", "visibility", "none");
                this.$globalConstant.map.setLayoutProperty("TDT_Terra", "visibility", "none");
                this.$globalConstant.map.setLayoutProperty("simple-tiles", "visibility", "visible");
            },
            toTDT_Raster() {
                this.$globalConstant.map.setLayoutProperty("TDT_Raster", "visibility", "visible");
                this.$globalConstant.map.setLayoutProperty("TDT_Terra", "visibility", "none");
                this.$globalConstant.map.setLayoutProperty("simple-tiles", "visibility", "none");
            }

        },
        created() {
            let that = this;
            this.$Bus.$on("tilesVisible", res => {
                that.visible = !that.visible;
            })
        }
    }
</script>

<style>
    .imgTiles :hover {
        cursor: pointer;
    }

    .el-popover {
        background: #fff0;
        min-width: 30px;
        border: 0;
    }
</style>